<template>
	<view class="content">
		<view class="member-center" :style="{
			  backgroundImage: `url('${backgroundImage1}')`,
			  backgroundSize: '100% 100%',
			  height:'400rpx'
			}">
			<view class="arr" @click='back'>
				<up-icon name="arrow-left" color="#fff" size="20"></up-icon>
			</view>
		</view>
		<view class="member-main marginTop-200" :style="{
			  backgroundImage: `url('${backgroundImage2}')`,
			  backgroundSize: '100% 100%',
			  height:'450rpx'
			}">
			<!-- 头部 -->
			<view class="">
				<view class="flex items-center">
					<!-- 头像 -->
					<view class="width-100 height-100" style="border: 1px solid #fff; border-radius: 50%;">
						<image :src="memberList.avatar" mode="" style="width: 100%; height: 100%;border-radius: 50%">
						</image>
					</view>
					<view class="marginLeft-16">
						<view class="fontSize-32 weight-700" style="color: #985900;">
							{{memberList.username}}
						</view>
						<view class="marginTop-6 fontSize-24">
							{{memberList.title1}}
						</view>
					</view>
				</view>
			</view>
			<!-- 会员区 -->
			<view class="marginTop-40 flex space-between items-center" style="position: relative;">
				<view class="borderRadius-30 width-194 height-208 member-item" v-for="(item,index) in memberList.type"
					:key='index' @click='changePrice(item,index)'
					:style="index == currentIndex? { backgroundImage: 'url(https:\/\/bbsf.oss-cn-shanghai.aliyuncs.com\/english\/my\/bgframe.png);',backgroundSize:'100% 100%',border:'none' } : {}">
					<view class="text-center marginTop-20 fontSize-26">
						{{item.name}}
					</view>
					<view class="text-center marginTop-36 fontSize-44 weight-700">
						{{item.price}}
					</view>
					<view class="money text-center marginTop-20">
						{{item.yprice}}
					</view>
				</view>
				<image src="../../static/cheap-icon.png" mode="" class="cheap-img"></image>
			</view>
			<!-- 	<view class="fontSize-24 flex flex-center items-center marginTop-28">
				<view class="marginRight-10">
					会员权益服务说明
				</view>
				<image src="../../static/arr.png" mode="" style="width: 24rpx; height: 24rpx;"></image>
			</view> -->

		</view>
		<view class="content-main">
			<view class="width-full flex flex-center">
				<image :src="memberList.quanyi_image" mode="" style="width: 686rpx; height: 842rpx;">
				</image>
			</view>
		<!-- 	<view class="width-full flex flex-center marginTop-20">
				<image :src="memberList.dfquanyi_image" mode="" style="width: 686rpx;height: 256rpx;"></image>
			</view> -->
		</view>



		<view class="flex space-between btn-section">
			<view class="btn text-center marginLeft-24 fontSize-32" @click="btnClick">
				{{memberList.title2}}
			</view>
			<view class="btn2 text-center marginRight-24" @click="toPage()">
				<view class="fontSize-30 marginTop-12">
					{{memberList.title3}}
				</view>
				<view class="fontSize-24 marginTop-10">
					{{memberList.title4}}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload,
		onShow
	} from '@dcloudio/uni-app';

	const memberCenterApi = inject("memberCenter");
	const memberList = ref([])
	const backgroundImage1 = ref('')
	const backgroundImage2 = ref('')
	const is_activated = ref(0)
	const currentIndex = ref(0)
	const webPageUrl = ref('https:\/\/weidian.com\/item.html?itemID=7299940903')
	const itemId=ref('')

	onLoad((op) => {
		is_activated.value = op.is_activated
	});
	const back = () => {
		uni.navigateBack()
	}
	onShow(() => {
		memberCenterApi().then((res) => {
			console.log(res);
			memberList.value = res
			backgroundImage1.value = res.mcblackbg_image
			backgroundImage2.value = res.mcyellowbg_image
			itemId.value=memberList.value.type[0].url
		});
	});

	const btnClick = () => {
		uni.navigateTo({
			url: '/pagesA/my/memberCode?is_activated=' + is_activated.value
		})
	}
	const changePrice = (item, index) => {
		currentIndex.value = index
		webPageUrl.value = item.url
		itemId.value=item.url
	}

	const toPage = () => {
		wx.navigateToMiniProgram({
			appId: 'wx4b74228baa15489a', //要跳转店铺的的appid
			path: 'lib/item/dist/pages/index/index?itemId='+itemId.value,
			envVersion: 'release',
			success(res) {
				// 打开成功
				console.log('跳转小程序成功！', res);
			}
		});
	

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: #f5f5f5;
		overflow: hidden;
	}

	.member-main {
		width: 686rpx;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		color: #AC6B0E;
	}

	.money {
		font-size: 24rpx;
		color: #DB9738;
		text-decoration-line: line-through;
		text-transform: none;
	}

	.btn {
		width: 222rpx;
		height: 104rpx;
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		border: 2rpx solid #985900;
		line-height: 104rpx;
		color: #985900;
		font-weight: bold;
	}

	.btn2 {
		width: 460rpx;
		height: 104rpx;
		background: linear-gradient(97deg, #FFEFD9 0%, #E2B372 100%);
		border-radius: 92rpx 92rpx 92rpx 92rpx;
		color: #985900;
		margin-left: 20rpx;
	}

	.arr {
		position: absolute;
		left: 22rpx;
		top: 120rpx;
	}

	.member-item {
		border: 4rpx solid #EAB56E;
		box-sizing: border-box;

	}

	.cheap-img {
		position: absolute;
		top: -14rpx;
		right: 60rpx;
		width: 68rpx;
		height: 34rpx;
	}

	.btn-section {
		position: fixed;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		background-color: #f5f5f5;
		padding-bottom: 20rpx;
	}

	.content-main {
		height: 850rpx;
		overflow-y: auto;
		margin-top: 280rpx;
		margin-bottom: 150rpx;
	}

	@media (max-height: 800px) {
		.content-main {
			height: 550rpx;

		}

		.btn-section {

			bottom: 0rpx;
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>